<template>
	<!-- <view class="firstPage">
		<view class="prompt" v-if="isShow" :style="{'top':top + 'px','left':left + 'px'}">
			<view class="arrow">
			</view>
			<view class="closeBtn" @click="closeBtn">
				<u-icon name="close" color="#FFF" size="28"></u-icon>
			</view>
			<view class="">
				<text>添加小程序,优惠不错过</text>
			</view>
		</view>
		<view class="top_bg">
			<view class="location_search" :style="{'padding-top': height * 1   +  'px'}">
				<navigator url="/subpages/city/city" class="index-area" hover-class="none">
					<text class="overflow">{{locCity.nm}}</text>
					<u-icon name="arrow-down-fill" size="15"></u-icon>
				</navigator>
				<navigator url="../../subpages/search/search" class="se" hover-class="none">
					<u-search class="search-form" placeholder="请输入电影名称" :clearabled="true" :show-action="false"
						@change="searchCinema"></u-search>
				</navigator>
			</view>
			<view class="circleBg">
			</view>
			<swiper :style="{'top':heightTwo + 5  + 'px'}" class="ad" :indicator-dots="true" :autoplay="true"
				:interval="3000" indicator-color="#E3E3E3" indicator-active-color="#fff" :duration="1000">
				<swiper-item v-for="(item,index) in adImg" :key='index'>
					<view class="swiper-item">
						<image style="width:100%;height:100%" :src="item.wap_img" v-if="item.wap_img"
							@click="bgtiaozhuan(item)"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="middle" :style="{'margin-top': heightThree + 15 + 'px'}">
			<view class="hot_mov">
				<view class="con_top f-f">
					<view class="title">
						正在热映
					</view>
					<view class="title_right" @click="toIndex(0)">
						共{{movielist.length}}部
						<view class="iconfont icongengduo trans"></view>
					</view>
				</view>
				<view class="scroll">
					<view class="swiper" v-for="(item,index) in movielist" :key='index' @click="ordermovie_tiao(item)">
						<view class="ima">
							<image class="image" :src="item.img" mode=""></image>
							<view class="bg">
								{{item.sc}}分
							</view>
						</view>
						<view class="nm">
							{{item.nm | ellipsis(5)}}
						</view>
						<button v-if="item.showst == 3" class="shadow f-f" @click.stop="ordermovie_tiao(item)">
							<text>特惠</text>
						</button>
						<button v-if="item.showst == 4" class="shadow f-f pre_sell" @click.stop="ordermovie_tiao(item)">
							<text>预售</text>
						</button>
						<button v-if="item.showst == 5 && !item.isLike" class="shadow f-f wantosee"
							@click.stop="setMoviceLike(item, [0, index], 0)">
							<text>想看</text>
						</button>
						<button v-if="item.showst == 5 && item.isLike == 1" class="shadow f-f"
							@click.stop="setMoviceLike(item, [0, index], 1)">
							<text>已想</text>
						</button>
					</view>
				</view>
			</view>
			<view class="shall_mov">
				<view class="con_top f-f">
					<view class="title">
						即将上映
					</view>
					<view class="title_right" v-if="showlist.rows" @click="toIndex(1)">
						<text>共{{showlist.rows.length}}部</text>
						<text class="iconfont icongengduo trans"></text>
					</view>
				</view>
				<view class="scroll">
					<view class="swiper" v-for="(item,index) in showlist.rows" :key='index'
						@click="ordermovie_tiao(item)">
						<view class="ima">
							<image class="image" :src="item.img" mode=""></image>
							<view class="bg">
								{{item.wish | trannumber}}人想看
							</view>
						</view>

						<view class="nm">
							{{item.nm | ellipsis(5)}}
						</view>
						<button v-if="item.showst == 3" class="shadow f-f" @click.stop="ordermovie_tiao(item)">
							<text>特惠</text>
						</button>
						<button v-if="item.showst == 4" class="shadow f-f pre_sell" @click.stop="ordermovie_tiao(item)">
							<text>预售</text>
						</button>
						<button v-if="item.showst == 5 && !item.isLike" class="shadow f-f wantosee"
							@click.stop="setMoviceLike(item, [0, index], 0)">
							<text>想看</text>
						</button>
						<button v-if="item.showst == 5 && item.isLike == 1" class="shadow f-f"
							@click.stop="setMoviceLike(item, [0, index], 1)">
							<text>已想</text>
						</button>
					</view>
				</view>
			</view>
		</view>
		<u-popup class="bor" v-model="showShare" mode="bottom">
			<view class="uni-share">
				<view class="uni-share-content">
					<button class="uni-share-content-box" openType="share">
						<view class="uni-share-content-image">
							<image class="content-image" mode="widthFix" src="@/static/img/other/my/wechart.png">
							</image>
						</view>
						<text class="uni-share-content-text">微信好友</text>
					</button>
					<button bindtap="__e" class="uni-share-content-box" @click="toBill">
						<view class="uni-share-content-image">
							<image class="content-image" mode="widthFix" src="@/static/img/other/my/share.png">
							</image>
						</view>
						<text class="uni-share-content-text">专属海报</text>
					</button>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="isKnow" mode="center" :mask-close-able='false' border-radius='24'>
			<view class="know">
				<view class="img">
					<image class="image" src="../../static/img/other/notify.png" mode=""></image>
				</view>
				<view class="title">
					【升级维护公告】
				</view>
				<view class="text">
					1.为更好提供我们的服务，橘票儿于2021年11月22日（下周一）凌晨0点开始停机维护。
				</view>
				<view class="text">
					2.预计需要时间（6小时）维护期内无法正常购票，由此带来的不便敬请谅解。
				</view>
				<view class="button" @click="isKnow = false">
					我知道了
				</view>
			</view>
		</u-popup>
	</view> -->
	<view class="firstPage">
		<!-- 提示 窗口 start -->
		<!-- #ifndef MP-TOUTIAO -->
		<view class="prompt" v-if="isShow" :style="{'top':top==0?'172rpx':top+'px','left':left==0?'382rpx':left+'px'}">
			<view class="arrow">
			</view>
			<view class="closeBtn" @click="closeBtn">
				<u-icon name="close" color="#FFF" size="28"></u-icon>
			</view>
			<view class="">
				<text>添加小程序,优惠不错过</text>
			</view>
		</view>
		<!-- #endif -->
		<!-- 提示 窗口 end -->

		<!-- 上部搜索框 -->
		<!-- #ifndef MP-TOUTIAO -->
		<view class="location_search" :style="{'padding-top': height==0?'96rpx':height+'px'}">
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<view class="location_search">
				<!-- #endif -->
				<navigator url="/subpages/city/city" class="index-area" hover-class="none">
					<text class="overflow">{{locCity.nm}}</text>
					<u-icon name="arrow-down-fill" size="15" class="locCityIcon"></u-icon>
				</navigator>
				<!-- #ifndef MP-TOUTIAO -->
				<view class="se" v-on:click.capture.stop="toSearch" :style="{'width':searchWidth+'px',
			'height':menuHeight==0?'64rpx':menuHeight+'px'}">
					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					<view class="se" @tap="toSearch">
						<!-- #endif -->
						<view class="searchImg"></view>
						<text class="search-form">请输入电影名称</text>
					</view>
				</view>

				<view class="middle" :style="{'margin-top':isIOS?'-1rpx':'0'}">
					<view class="bannerAndButton">
						<view class="swiperNotDataLayout" v-if="adImg.length == 0"></view>
						<!-- #ifndef MP-TOUTIAO -->
						<swiper :style="{'top':heightTwo + 5  + 'px'}" class="swiper" :circular='true'
							:indicator-dots="true" :autoplay="true" :interval="3000" indicator-color="#E3E3E3"
							indicator-active-color="#fff" :duration="1000" v-else>
							<!-- #endif -->
							<!-- #ifdef MP-TOUTIAO -->
							<swiper class="swiper" :circular='true' :indicator-dots="true" :autoplay="true"
								:interval="3000" indicator-color="#E3E3E3" indicator-active-color="#fff"
								:duration="1000" v-else>
								<!-- #endif -->
								<swiper-item v-for="(item,index) in adImg" :key='index' class="swiper-item">
									<image style="width:100%;height:100%" @click="bgtiaozhuan(item)" :src="item.wap_img"
										v-if="item.wap_img"></image>
								</swiper-item>
							</swiper>
							<view class="buttonBox">
								<view class="button-item" @click="tiao_movie(1)">
									<image style="width: 88rpx;height: 88rpx;" src="../../static/img/other/takeCode.png"
										mode=""></image>
									<text>取票码</text>
									<view class="tip" v-if="outOrderNum > 0">
										{{outOrderNum}}
									</view>
								</view>
								<!-- <view class="button-item" @click="tiao_movie(2)">
									<image style="width: 88rpx;height: 88rpx;" src="../../static/img/other/coupon.png"
										mode=""></image>
									<text>优惠券</text>
								</view> -->
								<button class="button-item onlineServe" open-type="contact" plain="false"
									hover-class="none">
									<image style="width: 88rpx;height: 88rpx;"
										src="../../static/img/other/onlineService.png" mode=""></image>
									<view class="text">
										在线客服
									</view>
								</button>
								<view class="button-item" @click="tiao_movie(4)">
									<image style="width: 88rpx;height: 88rpx;"
										src="../../static/img/other/phoneService.png" mode=""></image>
									<text>电话客服</text>
								</view>
							</view>
					</view>
					<!-- 正在热映 -->
					<view class="hot_mov">
						<view class="item-title">
							<view class="title">
								正在热映
							</view>
							<view class="title_right" @click="toIndex(0)">
								共{{movielist.length}}部
								<view class="more"></view>
							</view>
						</view>
						<scroll-view class="scroll" :scroll-x="true">
							<view class="notData_layout" v-if="movielist.length == 0">
								<view v-for="(item,index) in 5" class="scroll-item_layout" :key='index'>
									<view class="img_layout"></view>
									<view class="nm_layout"></view>
								</view>
							</view>
							<view class="isData_layout" v-else>
								<view v-for="(item,index) in movielist" class="scroll-item" :key='index'
									@click="ordermovie_tiao(item)">
									<view class="ima">
										<view class="mask"></view>
										<image class="image" :src="item.img" mode=""></image>
										<view class="type">
											{{item.version}}
										</view>
										<view class="bg">
											{{item.sc}}<text class="after">分</text>
										</view>
									</view>
									<view class="nm">
										{{item.nm | ellipsis(5)}}
									</view>
									<view v-if="item.showst == 3" class="button bgc-tehui"
										@click.stop="ordermovie_tiao(item)">
										<text>特惠</text>
									</view>
									<view v-if="item.showst == 4" class="button bgc-yushou"
										@click.stop="ordermovie_tiao(item)">
										<text>预售</text>
									</view>
									<view v-if="item.showst == 5 && !item.isLike" class="button bgc-xiangkan"
										@click.stop="setMoviceLike(item, [0, index], 0)">
										<text>想看</text>
									</view>
									<view v-if="item.showst == 5 && item.isLike == 1" class="button bgc-yikan"
										@click.stop="setMoviceLike(item, [0, index], 1)">
										<text>已想</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 即将上映 -->
					<view class="shall_mov">
						<view class="item-title">
							<view class="title">
								即将上映
							</view>
							<view class="title_right" v-if="showlist.rows" @click="toIndex(2)">
								<text>共{{showlist.rows.length}}部</text>
								<view class="more"></view>
							</view>
						</view>
						<scroll-view class="scroll" :scroll-x="true">
							<view class="notData_layout" v-if="showlist.length == 0">
								<view v-for="(item,index) in 5" class="scroll-item_layout" :key='index'>
									<view class="img_layout"></view>
									<view class="nm_layout"></view>
								</view>
							</view>
							<view class="isData_layout" v-else>
								<view v-for="(item,index) in showlist.rows" class="scroll-item" :key='index'
									@click="ordermovie_tiao(item)">
									<view class="ima">
										<view class="mask"></view>
										<image class="image" :src="item.img" mode=""></image>
										<view class="numberOfPeople">
											{{item.wish | trannumber}}<text class="after">人想看</text>
										</view>
									</view>
									<view class="nm">
										{{item.nm | ellipsis(5)}}
									</view>
									<view v-if="item.showst == 3" class="button bgc-tehui"
										@click.stop="ordermovie_tiao(item)">
										<text>特惠</text>
									</view>
									<view v-if="item.showst == 4" class="button bgc-yushou"
										@click.stop="ordermovie_tiao(item)">
										<text>预售</text>
									</view>
									<view v-if="item.showst == 5 && !item.isLike" class="button bgc-xiangkan"
										@click.stop="setMoviceLike(item, [0, index], 0)">
										<text>想看</text>
									</view>
									<view v-if="item.showst == 5 && item.isLike == 1" class="button bgc-yikan"
										@click.stop="setMoviceLike(item, [0, index], 1)">
										<text>已想</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<!-- 邀请好友 -->
				<u-popup class="bor" v-model="showShare" mode="bottom">
					<view class="uni-share">
						<view class="uni-share-content">
							<button class="uni-share-content-box" openType="share">
								<view class="uni-share-content-image">
									<image class="content-image" mode="widthFix"
										src="@/static/img/other/my/wechart.png">
									</image>
								</view>
								<text class="uni-share-content-text">微信好友</text>
							</button>
							<button bindtap="__e" class="uni-share-content-box" @click="toBill">
								<view class="uni-share-content-image">
									<image class="content-image" mode="widthFix" src="@/static/img/other/my/share.png">
									</image>
								</view>
								<text class="uni-share-content-text">专属海报</text>
							</button>
						</view>
					</view>
				</u-popup>
				<Privacy v-if="showPrivacy"></Privacy>
			</view>
</template>

<script>
	import Privacy from '@/pages/components/privacy.vue'
	export default {
		// 自定义分享
		onShareAppMessage(res) {
			let scene = uni.getStorageSync('uInfo')
			if (scene) {
				scene = JSON.parse(scene).id
			} else {
				scene = ''
			}
			// console.log(scene)
			return {
				title: '在线购买电影票立减5-30元',
				imageUrl: "../../static/img/other/my/mini-share-img.jpg",
				// imageUrl: "../../static/img/other/my/youjia.png",
				path: '/pages/index/index?scene=' + scene
			}
		},
		data() {
			return {
				isKnow: false,
				firstPagePaddingTop:0,//banner图上方给title留的位置
				titleHeight:0,//首页title的高度
				height: 0,
				menuHeight:0,
				heightTwo: 0,
				heightThree: 0,
				remeberHeight: true,
				adImg: [],
				showShare: false,
				// 电影列表
				movielist: [],
				// 即将上映
				showlist: [],
				swiperList: [],
				top: 0,
				left: 0,
				isShow: true,
				searchWidth:212,//顶部搜索框宽度
				isIOS:false,//用户系统型号
				outOrderNum:0,//已出票订单数
				init:true,//是否在初始化阶段
				timer1:null,//定时器1
				showPrivacy:false,
			}
		},
		onShow() {
			// console.log(uni.getStorageSync('scene'))
			// this.getSwiper()
		},
		onLoad(option) {
			this.setHeight()
			if (option.scene) {
				let scene = decodeURIComponent(option.scene)
				uni.setStorageSync('otherScene', scene)
			}
			this.totalGetData()
		},
		watch: {
			'$store.state.showPrivacy'(v){
				this.showPrivacy = v
			}
		},
		onHide() {
			clearInterval(this.timer1)
		},
		computed: {
			locCity: {
				get() {
					// return this.$store.state.chooseLoc ||{
					// 	nm: '城市'
					// }
					// let loc = this.$store.state.locCity || {nm:'城市'}
					let loc = this.$store.state.locCity || (uni.getStorageSync('loc')==''?null:JSON.parse(uni.getStorageSync('loc'))) || {nm:'北京'}
					let chooseloc = this.$store.state.chooseLoc || (uni.getStorageSync('chooseloc')==''?null:JSON.parse(uni.getStorageSync('chooseloc')))
					if(loc && chooseloc){
						//此时两个参数都有
						return chooseloc.update_time >= loc.update ? chooseloc : loc;//返回最新的地址
					}else{
						return chooseloc || loc || {nm:'北京'}
					}
				},
				set(val) {}
				// get() {
				// 					return this.$store.state.chooseLoc || {
				// 						nm: '城市'
				// 					}
				// 				},
				// 				set(val) {}
			},
			is_show: {
				get() {
					return this.$store.state.uInfo.is_show || undefined
				},
			}
		},
		methods: {
			setHeight() {
				uni.getSystemInfo({
					success: (res) => {
						// console.log(res.osName);
						if(res.osName == 'ios'){
							this.isIOS = true
						}
					}
				})
				this.$nextTick(() => {
					let menu = uni.getMenuButtonBoundingClientRect()
					// console.log('---------顶部小程序胶囊------------',menu);
					this.top = menu.top + menu.height + 6
					this.left = menu.left * 0.68
					this.height = menu.top
					this.menuHeight = menu.height
					// console.log('getMenuButtonBoundingClientRect==>:',this.$moment().format('x'));
					const query = uni.createSelectorQuery().in(this);
					query.select('.location_search').boundingClientRect(data =>{
						// console.log('location_search的下部:',data.bottom);
						this.remeberHeight = false
						this.heightTwo = this.height + data.height
						this.titleHeight = data.height
						this.firstPagePaddingTop = data.height + this.height
					}).exec();
					query.select('.index-area').boundingClientRect(data1 => {
						this.searchWidth = menu.left - data1.right -25
					}).exec();
					
					
					
					
					// query.select('.top_bg').boundingClientRect(data1 => {
					// 	height1 = data1.height
					// }).exec()
					// query.select('.ad').boundingClientRect(data2 => {
					// 	height2 = data2.height
					// 	let res = this.heightTwo - (height1 - height2)
					// 	this.heightThree = res + 10
					// }).exec()
				})
			},
			totalGetData(){
				let flag = 0
				// 获取轮播图
				this.$api.getSwiper({
					loc: 0
				}).then((res) => {
					this.adImg = res.data.data
					console.log('轮播图的数据',res)
					flag++
				})
				// 获取正在热映
				this.$api.getMovie().then(res => {
					this.movielist = res.data.data
					console.log('正在热映的数据',res)
					flag++
				})
				// 获取即将上映
				this.$api.getComing({
					limit: 15,
					offset: 0
				}).then(res => {
					this.showlist = res.data.data
					console.log('即将上映的数据',res)
					flag++
				})
				
				this.timer1 = setInterval(()=>{
					if(flag == 3 && this.init){
						uni.hideLoading()
						this.init = false
					}
				},100)
			},
			tiao_movie(type){
				switch(type){
					case 1:
						// 前往订单页面
						this.$common.toLinkQuery('cinema_ticket',{type:'total'})
						break;
					case 2:
						// 前往优惠券页面
						this.$common.toLinkQuery('coupon')
						break;
					case 3:
						// 前往在线客服页面
						uni.navigateTo({
							url: "/subpages/webview/webview?url=https://customer.wapiao.wang/s/5869391mm"
						})
						break;
					case 4:
						// 点击电话客服
						uni.makePhoneCall({
							phoneNumber: '13229877458'
						})
						break;
				}
			},
			closeBtn() {
				this.isShow = false
			},
			//饿了么
			tiao_elm() {
				uni.navigateToMiniProgram({
					appId: 'wxece3a9a4c82f58c9',
					path: 'taoke/pages/shopping-guide/index?scene=QVuyLku'
				})
			},
			//美团
			tiao_meit() {
				uni.navigateToMiniProgram({
					appId: 'wxde8ac0a21135c07d',
					path: '/index/pages/h5/h5?lch=cps:waimai:5:89f9827eb7b12545ff414e7f46f36f45:ceshi:2:120482&weburl=https%3A%2F%2Fdpurl.cn%2FP1vFoGAz&f_userId=1&f_token=1'
				})
			},
			// 话费
			tiao_huafei() {
				uni.navigateToMiniProgram({
					appId: 'wxa918198f16869201',
					path: 'pages/web/web?specialUrl=1&src=https%3A%2F%2Fmobile.yangkeduo.com%2Fduo_transfer_channel.html%3FresourceType%3D39997%26pid%3D21779017_211943968%26cpsSign%3DCE_210717_21779017_211943968_99c7c11512e3081643d7260ae020802d%26duoduo_type%3D2'
				})
			},
			// 车票
			tiao_chepiao() {
				uni.navigateToMiniProgram({
					appId: 'wxa918198f16869201',
					path: '/pages/web/web?specialUrl=1&src=https%3A%2F%2Fmobile.yangkeduo.com%2Fduo_transfer_channel.html%3FresourceType%3D50005%26pid%3D21779017_211943968%26cpsSign%3DCE_210717_21779017_211943968_a3d818bb26c7dc7ca4914271aa71baaf%26duoduo_type%3D2'
				})
			},
			//外链
			toWeb(e) {
				uni.navigateTo({
					url: '../web/web?url=' + e
				})
				console.log(url)
			},
			// 跳转到搜索页
			toSearch() {
				uni.navigateTo({
					url: '../../subpages/search/search'
				})
			},
			// 跳转到电影页面
			// i = 0 ,正在热映   i = 1 ,即将上映
			toIndex(i) {
				// console.log(i)
				uni.reLaunch({
					url: `/pages/first/first?type=${i}`
				})
			},
			// 背景图跳转
			bgtiaozhuan(row) {
				let scene = uni.getStorageSync('uInfo')
				if (scene) {
					scene = JSON.parse(scene).id
				} else {
					scene = ''
				}
				uni.navigateTo({
					url: `/subpages/movie/movie?mid=${row.mid}&s=1&scene=${scene}`
				})
			},
			// 跳转海报页
			toBill() {
				uni.navigateTo({
					url: '/subpages/bill/bill'
				})
			},
			// 分享方法
			clickShare() {
				this.showShare = true
			},
			// 跳转到公众号
			toFollow() {
				uni.navigateTo({
					url: '/subpages/follow/follow'
				})
			},
			// 即将上映跳转
			ordermovie_tiao(item) {
				switch (Number(item.showst)) {
					case 3:
						uni.navigateTo({
							url: `/subpages/detailed/detailed?mid=${item.mid}`
						})
						break
					case 4:
						uni.navigateTo({
							url: `/subpages/detailed/detailed?mid=${item.mid}`
						})
						break
					case 5:
						uni.navigateTo({
							url: `/subpages/movie/movie?mid=${item.mid}&s=${item.s}`
						})
						break
				}
			},
			//设置想看
			setMoviceLike(item, index, like) {
				uni.showLoading({
					title: '加载中'
				})
				// console.log(item)
				item.isList = item.isList == 1 ? 0 : 1
				this.$api.setMoviceLike({
					mid: item.mid
				}).then(res => {
					// this.$emit('change', like, index)
					this.listChange(like, index)
					uni.hideLoading()
				})
			},
			//想看点击后的数据更新
			listChange(like, index) {
				// 0 == like 
				// ? (this.showlist[index[0]].subList[index[1]].isLike = 1, this.showlist[index[0]].subList[index[1]].wish++) 
				// : (this.showlist[index[0]].subList[index[1]].isLike = 0, this.showlist[index[0]].subList[index[1]].wish--)
				0 == like ? (this.showlist.rows[index[1]].isLike = 1, this.showlist.rows[index[1]].wish++) : (this.showlist
					.rows[index[1]].isLike = 0, this.showlist.rows[index[1]].wish--)
			},
		},
		components: {
			Privacy,
		}
	}
</script>

<style lang="scss" scoped>
	// .know {
	// 	width: 581rpx;
	// 	// height: 696rpx;
	// 	background: #FFFFFF;
	// 	border-radius: 24rpx !important;
	// 	padding: 33rpx 49rpx 49rpx 49rpx;
	// 	margin: 0 auto;

	// 	.img {
	// 		width: 294rpx;
	// 		height: 196rpx;
	// 		margin: 0 auto;
	// 		margin-bottom: 25rpx;

	// 		.image {
	// 			width: 100%;
	// 			height: 100%;
	// 		}
	// 	}

	// 	.title {
	// 		font-size: 32rpx;
	// 		font-family: PingFang SC;
	// 		font-weight: bold;
	// 		color: #333333;
	// 		margin: 0 auto;
	// 		text-align: center;
	// 		margin-bottom: 41rpx;
	// 	}

	// 	.text {
	// 		font-size: 28rpx;
	// 		font-family: PingFang SC;
	// 		font-weight: 500;
	// 		color: #666666;
	// 		line-height: 48rpx;

	// 	}

	// 	.button {
	// 		margin-top: 45rpx;
	// 		width: 100%;
	// 		height: 80rpx;
	// 		line-height: 80rpx;
	// 		background: #5A97FF;
	// 		border-radius: 10rpx;
	// 		font-size: 30rpx;
	// 		font-family: PingFang SC;
	// 		font-weight: 500;
	// 		color: #FFFFFF;
	// 		text-align: center;
	// 	}
	// }

	// .prompt {
	// 	position: fixed;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	z-index: 1000;
	// 	width: 43vw;
	// 	color: white;
	// 	background-color: black;
	// 	opacity: .8;
	// 	padding: 8rpx 18rpx 8rpx 20rpx;
	// 	border-radius: 10rpx;
	// 	top: 0;

	// 	.arrow {
	// 		position: absolute;
	// 		top: -12rpx;
	// 		right: 83rpx;
	// 		width: 0;
	// 		height: 0;
	// 		border-left: 8rpx transparent solid;
	// 		border-right: 8rpx transparent solid;
	// 		border-bottom: 16rpx black solid;
	// 	}

	// 	.closeBtn {
	// 		// position: absolute;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		// width: 35rpx;
	// 		// height: 35rpx;
	// 		// border-radius: 50%;
	// 		// right: -15rpx;
	// 		// top: -15rpx;
	// 		color: white;
	// 		background: black;
	// 	}
	// }



	// .menu {
	// 	padding: 0rpx 30rpx 30rpx;
	// }

	// .menu image {}

	// .menu .img_block {
	// 	width: 80rpx;
	// 	height: 80rpx;
	// 	position: relative;

	// 	.img_block_img {
	// 		width: 100%;
	// 		height: 100%;
	// 	}

	// 	.img_block_tip {
	// 		display: flex;
	// 		justify-content: center;
	// 		align-content: flex-start;
	// 		position: absolute;
	// 		width: 70rpx;
	// 		height: 35rpx;
	// 		top: -21rpx;
	// 		left: 17rpx;

	// 		.img_block_tip_bg {
	// 			position: absolute;
	// 			width: 100%;
	// 			height: 100%;
	// 		}

	// 	}
	// }

	// .menu text {
	// 	display: block;
	// 	line-height: 32rpx;
	// 	font-size: 12px;
	// 	padding: 15rpx 0 0;
	// 	text-align: center;
	// 	color: #333;
	// }

	// .elm {
	// 	background: linear-gradient(-90deg, #185AE9 0%, #0296E1 100%);
	// 	border-radius: 10rpx;
	// 	height: 174rpx;
	// 	position: relative;
	// 	padding: 15rpx;
	// 	box-sizing: border-box;
	// }

	// .elml {
	// 	position: absolute;
	// 	left: 0;
	// 	top: 0;
	// 	z-index: 10;
	// 	width: 197rpx;
	// 	height: 174rpx;
	// }

	// .elml .icona {
	// 	width: 197rpx;
	// 	height: 174rpx;
	// 	position: absolute;
	// 	left: 0;
	// 	top: 0;
	// 	z-index: 1;
	// }

	// .elml .iconb {
	// 	width: 81rpx;
	// 	height: 81rpx;
	// 	position: relative;
	// 	z-index: 2;
	// 	margin-left: 47rpx;
	// }

	// .elmr {
	// 	background: #fff;
	// 	padding: 0 30rpx 0 88rpx;
	// 	height: 100%;
	// 	box-sizing: border-box;
	// 	width: 549rpx;
	// }

	// .elmrlt {
	// 	font-size: 32rpx;
	// 	line-height: 32rpx;
	// }

	// .elmrr {
	// 	background: #FFEDE0;
	// 	border-radius: 50%;
	// 	border: 1px solid #F36347;
	// 	width: 100rpx;
	// 	height: 100rpx;
	// 	box-shadow: 0px 0px 7px 2px rgba(255, 230, 224, 0.94);
	// 	color: #F24E4D;
	// 	font-size: 24rpx;
	// 	line-height: 32rpx;
	// 	text-shadow: 1px 1px 1px rgba(179, 22, 2, 0.36);
	// }

	// .meit {
	// 	background: linear-gradient(-90deg, #FACC22 0%, #F88000 100%);
	// }

	// .meit .iconb {
	// 	width: 110rpx;
	// 	height: 70rpx;
	// }

	// /****/
	// .firstPage {
	// 	// background-color: #F1F1F1;
	// 	background-color: white;
	// }

	// .top_bg {
	// 	width: 100vw;
	// 	height: 240rpx !important;
	// 	background: linear-gradient(90deg, #EF4546 0%, #EF298A 100%);
	// 	position: relative;

	// 	.circleBg {
	// 		width: 100%;
	// 		background: linear-gradient(90deg, #EF4546 0%, #EF298A 100%);
	// 		border-radius: 50%;
	// 		position: absolute;
	// 		bottom: 0;
	// 		transform: translateY(50%);
	// 		height: 170rpx !important;
	// 		bottom: -4rpx !important;
	// 	}

	// 	.ad {
	// 		width: 702rpx;
	// 		position: absolute;
	// 		bottom: -55rpx;
	// 		left: 50%;
	// 		transform: translateX(-50%);
	// 		border-radius: 8rpx;
	// 		// background: linear-gradient(90deg, #EF4546 0%, #EF298A 100%);

	// 		height: 204rpx !important;
	// 		border-radius: 18rpx;
	// 		overflow: hidden;
	// 	}

	// 	.location_search {
	// 		width: 100vw;
	// 		// padding: 0 24rpx 24rpx 24rpx;
	// 		padding: 0 24rpx 14rpx 24rpx;
	// 		display: flex;
	// 		justify-content: flex-start;
	// 		align-items: center;
	// 		position: fixed;
	// 		background: linear-gradient(90deg, #EF4546 0%, #EF298A 100%);
	// 		// background: #FD9031;
	// 		z-index: 999;

	// 		.index-area {
	// 			color: #FFFFFF;
	// 			font-size: 28rpx;
	// 		}

	// 		.se {
	// 			display: flex;
	// 			align-items: center;
	// 			width: 60vw;
	// 		}

	// 		.search-form {
	// 			margin-left: 50rpx;
	// 			// flex: 1;
	// 		}
	// 	}
	// }


	// .swiper-item {
	// 	width: 100%;
	// 	height: 100%;
	// }


	// .middle {

	// 	padding: 0 24rpx;

	// 	.focusAndBuy {
	// 		justify-content: space-between;

	// 		.left,
	// 		.right {
	// 			position: relative;
	// 			width: 48%;
	// 			height: 130rpx;
	// 			padding: 26rpx 0 0 30rpx;
	// 			justify-content: space-between;
	// 			background-color: #FFFFFF;
	// 			border-radius: 8rpx;
	// 			box-shadow: 0px 0px 9px 0px rgba(162, 46, 47, 0.1);

	// 			.con {
	// 				font-size: 26rpx;
	// 				color: #333333;
	// 				line-height: 36rpx;
	// 				font-weight: 600;

	// 				.small {
	// 					font-size: 22rpx;
	// 				}
	// 			}
	// 		}

	// 		.left {
	// 			.ima {
	// 				width: 362rpx;
	// 				height: 98rpx;
	// 			}
	// 		}

	// 		.ima {
	// 			position: absolute;
	// 			right: 0;
	// 			bottom: 0;
	// 			width: 151rpx;
	// 			height: 102rpx;
	// 		}

	// 	}

	// 	// 喇叭
	// 	.index-laba {
	// 		padding: 10rpx 20rpx;
	// 		background: #FFFFFF;
	// 		margin-top: 20rpx;
	// 		margin-bottom: 34rpx;
	// 		font-size: 28rpx;
	// 		display: flex;
	// 		align-items: center;
	// 		box-sizing: border-box;
	// 		box-shadow: 0px 0px 9px 0px rgba(162, 46, 47, 0.1);

	// 		.laba-padding-wrap {
	// 			height: 50rpx;
	// 			width: 100%;
	// 			margin-left: 10rpx;
	// 			padding-top: 6rpx;
	// 			overflow: hidden;
	// 		}
	// 	}

	// 	// 正在热映   即将上映
	// 	.hot_mov,
	// 	.shall_mov {
	// 		padding-bottom: 61rpx;

	// 		.con_top {
	// 			justify-content: space-between;
	// 			font-size: 32rpx;

	// 			.title_right {
	// 				font-size: 24rpx;
	// 				color: #999999;
	// 				display: flex;
	// 				align-items: center;

	// 				.trans {
	// 					display: inline-block;
	// 					margin-left: 17rpx;
	// 					font-size: 20rpx;
	// 				}
	// 			}

	// 		}

	// 		.scroll {
	// 			display: flex;
	// 			overflow-x: scroll;

	// 			.swiper {
	// 				padding-top: 17rpx;
	// 				font-size: 26rpx;

	// 				&:first-of-type {
	// 					margin: 0 12rpx 0 0 !important;
	// 				}

	// 				width: 182rpx !important;
	// 				margin: 0 12rpx !important;

	// 				.nm {
	// 					margin: 5rpx 0 9rpx 0;
	// 				}

	// 				.ima {
	// 					width: 174rpx;
	// 					height: 244rpx;
	// 					position: relative;

	// 					.image {
	// 						width: 100%;
	// 						height: 100%;
	// 						border-radius: 8rpx;
	// 					}

	// 					.bg {
	// 						padding: 10rpx;
	// 						width: 100%;
	// 						position: absolute;
	// 						color: white;
	// 						bottom: 0;
	// 						opacity: .6;
	// 						background: linear-gradient(transparent, black);
	// 						border-radius: 8rpx;
	// 					}
	// 				}

	// 				.shadow {
	// 					width: 100rpx;
	// 					height: 46rpx;
	// 					background: linear-gradient(-30deg, #EF434C, #EF2C84);
	// 					box-shadow: 0px 0px 9px 0px rgba(183, 46, 47, 0.32);
	// 					border-radius: 23px;
	// 					color: white;
	// 					justify-content: center;
	// 					margin: 0;
	// 					align-items: center;
	// 					font-size: 24rpx;
	// 					padding: 0;
	// 				}

	// 				// 预售
	// 				.pre_sell {
	// 					background: #F55D4D;
	// 				}

	// 				// 想看
	// 				.wantosee {
	// 					padding: 0 12rpx;
	// 					font-size: 24rpx;
	// 					border: 1rpx solid #F55D4D;
	// 					background: none;
	// 					color: #F55D4D;
	// 				}
	// 			}
	// 		}
	// 	}

	// 	.hot_mov {
	// 		.bg {
	// 			color: red !important;
	// 			font-size: 28rpx;
	// 			font-weight: 600;
	// 		}
	// 	}
	// }

	// // 分享弹窗
	// .uni-share {
	// 	-webkit-box-orient: vertical;
	// 	flex-direction: column;
	// 	background-color: #fff;
	// }

	// .uni-share,
	// .uni-share-content {
	// 	display: flex;
	// 	-webkit-box-direction: normal;
	// }

	// .uni-share-content {
	// 	-webkit-box-orient: horizontal;
	// 	flex-direction: row;
	// 	flex-wrap: wrap;
	// 	-webkit-box-pack: center;
	// 	justify-content: center;
	// 	padding: 15rpx 15rpx 0;
	// }

	// .uni-share-content-box {
	// 	display: flex;
	// 	-webkit-box-orient: vertical;
	// 	-webkit-box-direction: normal;
	// 	flex-direction: column;
	// 	-webkit-box-align: center;
	// 	align-items: center;
	// 	width: 340rpx;
	// 	background-color: #fff;
	// 	line-height: normal;
	// }

	// .uni-share-content-box:after {
	// 	border: 0 !important;
	// }

	// .uni-share-content-image {
	// 	display: flex;
	// 	-webkit-box-orient: horizontal;
	// 	-webkit-box-direction: normal;
	// 	flex-direction: row;
	// 	-webkit-box-pack: center;
	// 	justify-content: center;
	// 	-webkit-box-align: center;
	// 	align-items: center;
	// 	width: 60rpx;
	// 	height: 60rpx;
	// 	overflow: hidden;
	// 	border-radius: 10rpx;
	// }

	// .content-image {
	// 	width: 60rpx;
	// 	height: 60rpx;
	// }

	// .uni-share-content-text {
	// 	font-size: 26rpx;
	// 	color: #aaa;
	// 	padding-top: 5px;
	// 	padding-bottom: 10px;
	// }

	// ::-webkit-scrollbar {
	// 	/*隐藏滚轮*/
	// 	display: none;
	// }

	
	.concat {
		border: none;
		padding: 0;
		margin: 0;
		line-height: inherit;

		.view {
			padding: 0;
			margin: 0;
			height: 32rpx;
			line-height: 32rpx;
		}
	}

	.know {
		width: 581rpx;
		// height: 696rpx;
		background: #FFFFFF;
		border-radius: 24rpx !important;
		padding: 33rpx 49rpx 49rpx 49rpx;
		margin: 0 auto;

		.img {
			width: 294rpx;
			height: 196rpx;
			margin: 0 auto;
			margin-bottom: 25rpx;

			.image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin: 0 auto;
			text-align: center;
			margin-bottom: 41rpx;
		}

		.text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 48rpx;

		}

		.button {
			margin-top: 45rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #5A97FF;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.prompt {
		position: fixed;
		display: flex;
		justify-content: space-between;
		z-index: 1000;
		width: 43vw;
		color: white;
		background-color: black;
		opacity: .8;
		padding: 8rpx 18rpx 8rpx 20rpx;
		border-radius: 10rpx;
		top: 0;

		.arrow {
			position: absolute;
			top: -12rpx;
			right: 83rpx;
			width: 0;
			height: 0;
			border-left: 8rpx transparent solid;
			border-right: 8rpx transparent solid;
			border-bottom: 16rpx black solid;
		}

		.closeBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			background: black;
		}
	}

	.menu-four {
		background-color: white;
		border-radius: 16rpx;

		>view {
			width: 18%;
			margin: 1%;
		}
	}

	.menu-three {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.menu-two {
		background-color: white;
		border-radius: 16rpx;

		.menu-two-cont {
			>view {
				width: 100rpx;
				margin-bottom: 14rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
			}

			.menu-two-block {
				.menu-two-image {
					width: 100%;
					height: 100rpx;
					border-radius: 50%;
					background-color: rgba(245, 245, 244, 1);
					margin-bottom: 6rpx;
					overflow: hidden;

					>image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

	}


	.menu {
		padding: 36rpx 30rpx 20rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.menu .img_block {
		width: 80rpx;
		height: 80rpx;
		position: relative;

		.img_block_img {
			width: 100%;
			height: 100%;
		}

		.img_block_tip {
			display: flex;
			justify-content: center;
			align-content: flex-start;
			position: absolute;
			width: 70rpx;
			height: 35rpx;
			top: -21rpx;
			left: 17rpx;

			.img_block_tip_bg {
				position: absolute;
				width: 100%;
				height: 100%;
			}

		}
	}

	.menu text {
		display: block;
		line-height: 32rpx;
		font-size: 12px;
		padding: 15rpx 0 0;
		text-align: center;
		color: #333;
	}

	/****/
	.firstPage {
		// background-color: #F1F1F1;
		background-color: #F4F4F4;
		position: relative;

		.bgc {
			position: absolute;
			top: 0;
			left: 0;
		}
	}


	.circleBg {
		width: 120%;
		background: linear-gradient(90deg, #EF4546 0%, #EF298A 100%);
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateY(50%) translateX(-50%);
		height: 290rpx !important;
		bottom: -4rpx !important;
	}

	.location_search {
		width: 100vw;
		/* #ifndef MP-TOUTIAO */
		padding: 0 24rpx 20rpx 24rpx;
		/* #endif */
		/* #ifdef MP-TOUTIAO */
		padding: 20rpx 30rpx;
		height: 100rpx;
		/* #endif */
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// position: fixed;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999;
		background-image: url('/static/img/other/bg-1.png');
		background-size: 100% 100%;

		.index-area {
			display: flex;

			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;

			.locCityIcon {
				display: flex;
				align-items: center;
				margin-left: 8rpx;
			}
		}

		.searchImg {
			height: 32rpx;
			width: 32rpx;
			background-image: url('../../static/img/other/search.png');
			background-size: 100% 100%;
			margin-left: 20rpx;
		}

		.se {
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			border-radius: 30px 30px 30px 30px;
			background-color: #fff;
			/* #ifdef MP-TOUTIAO */
			height: 100%;
			width: 100%;
			/* #endif */
		}

		.search-form {
			margin-left: 14rpx;

			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
	}



	// .swiper-item {
	// 	width: 100%;
	// 	height: 100%;
	// }


	.middle {
		display: flex;
		flex-direction: column;
		background-color: #F4F4F4;

		>view {
			background-color: #fff;
			margin-bottom: 20rpx;
			// border-radius: 16rpx;
			border-radius: 0 0 16rpx 16rpx;
			padding: 20rpx 30rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.bannerAndButton {
			background: linear-gradient(180deg, rgba(255, 83, 129, 0.75), #fff 85%);

			.swiper {
				width: 100%;
				height: 240rpx;
			}

			.buttonBox {
				display: flex;
				justify-content: space-between;
				padding: 8rpx 32rpx;

				.button-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					padding-top: 24rpx;

					position: relative;

					text {
						padding-top: 8rpx;
					}

					.tip {
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						background-color: #F53F3F;

						display: flex;
						justify-content: center;
						align-items: center;

						position: absolute;
						top: 20rpx;
						left: 70rpx;

						font-size: 20rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
				}

				.onlineServe {
					margin: 0;
					border: none;
					padding: 24rpx 0 0 0 !important;

					.text {
						margin-top: 8rpx;
						font-size: 24rpx;
						line-height: 34rpx;
					}
				}
			}
		}

		// 多个地方的更多按钮
		.more {
			background-image: url('/static/img/other/more.png');
			background-size: 100% 100%;
			width: 32rpx;
			height: 32rpx;
		}

		// 不同类型按钮的背景颜色
		.bgc-tehui {
			background: linear-gradient(90deg, #F87474, #FF4345);
		}

		.bgc-yushou {
			background: linear-gradient(90deg, #74B5F8, #428FF7);
		}

		.bgc-xiangkan {
			background: linear-gradient(90deg, #7BD0A7, #40B97F);
		}

		.bgc-yikan {
			border: 1px solid rgba(221, 221, 221, 0.8);
			color: #999999;
		}

		.hot_mov,
		.shall_mov {
			display: flex;
			flex-direction: column;

			.item-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;

				.title {
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #2E2E2E;
				}

				.title_right {
					display: flex;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.scroll {
				display: flex;
				width: 100%;
				height: 360rpx;
				white-space: nowrap;

				/* #ifdef MP-TOUTIAO */
				.isData_layout {
					display: flex;
				}

				/* #endif */
				.scroll-item {
					display: inline-block;
					margin-right: 16rpx;

					.ima {
						display: flex;
						flex-direction: column;

						position: relative;
						width: 174rpx;

						border-radius: 12rpx;
						overflow: hidden;

						.mask {
							position: absolute;
							top: 0;
							left: 0;
							z-index: 2;
							height: 100%;
							width: 100%;
							background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 20%);
							border-radius: 12rpx;
						}

						.image {
							height: 244rpx;
							width: 174rpx;
							border-radius: 12rpx;
						}

						.type {
							position: absolute;
							top: 12rpx;
							left: 8rpx;

							background-color: #000000;
							border-radius: 4rpx;
							padding: 0 4rpx;
							color: #fff;
							font-size: 10px;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
						}

						.bg {
							font-size: 24rpx;
							font-weight: bold;
							color: #FFBA35;
						}

						.numberOfPeople {
							font-size: 20rpx;
							font-weight: 400;
							color: #FFF;
						}

						.bg,
						.numberOfPeople {
							position: absolute;
							bottom: 6rpx;
							left: 4rpx;
							z-index: 3;

							font-family: PingFang SC-Bold, PingFang SC;

							.after {
								font-size: 8px;
							}
						}
					}

					.nm {
						margin: 16rpx 0;
						font-size: 14px;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #2E2E2E;
						/* #ifdef MP-TOUTIAO */
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						/* #endif */
					}

					.button {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 42rpx;
						width: 104rpx;
						border-radius: 21rpx;

						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	// 分享弹窗
	.uni-share {
		-webkit-box-orient: vertical;
		flex-direction: column;
		background-color: #fff;
	}

	.uni-share,
	.uni-share-content {
		display: flex;
		-webkit-box-direction: normal;
	}

	.uni-share-content {
		-webkit-box-orient: horizontal;
		flex-direction: row;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		justify-content: center;
		padding: 15rpx 15rpx 0;
	}

	.uni-share-content-box {
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
		-webkit-box-align: center;
		align-items: center;
		width: 340rpx;
		background-color: #fff;
		line-height: normal;
	}

	.uni-share-content-box:after {
		border: 0 !important;
	}

	.uni-share-content-image {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		width: 60rpx;
		height: 60rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.content-image {
		width: 60rpx;
		height: 60rpx;
	}

	.uni-share-content-text {
		font-size: 26rpx;
		color: #aaa;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	::-webkit-scrollbar {
		/*隐藏滚轮*/
		display: none;
	}

	// ========================骨架屏==========================
	.swiperNotDataLayout {
		width: 100%;
		height: 240rpx;
		background-color: #f6f6f6;
		border-radius: 12rpx;
	}

	.notData_layout {
		// 电影
		display: flex;

		.scroll-item_layout {
			margin-right: 16rpx;

			.img_layout {
				height: 244rpx;
				width: 174rpx;
				border-radius: 12rpx;
				background-color: #f6f6f6;
			}

			.nm_layout {
				margin-top: 20rpx;
				width: 144rpx;
				height: 40rpx;
				border-radius: 4rpx;
				background-color: #f6f6f6;
			}
		}
	}
</style>
